<template>
  <div class="sidebar">
    <el-menu
      @select="menuselect"
      unique-opened
      :default-openeds="defaultopeneds"
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#008ff9"
      text-color="#fff"
      active-text-color="#fff"
      router
    >
      <template v-for="item in items">
        <template v-if="item.children">
          <el-sub-menu :index="item.menuUrl" :key="item.menuUrl">
            <template #title v-show="item.menuName != '宣传教育情况'">
              <img style="margin-right: 5px" :src="'./src/assets/img/home/icon_' + item.menuUrl + '.png'" alt="" />
              <span>{{ item.menuName }}</span>
            </template>
            <template v-for="children in item.children">
              <el-sub-menu v-if="children.children" :index="children.menuUrl" :key="children.menuUrl">
                <template #title>
                  <el-icon :size="20"><component :is="children.icon"></component></el-icon>
                  {{ children.menuName }}
                </template>
                <el-menu-item v-for="(threeItem, i) in children.children" :key="i" :index="threeItem.menuUrl">
                  <el-icon :size="20"><component :is="threeItem.icon"></component></el-icon>
                  {{ threeItem.menuName }}</el-menu-item
                >
              </el-sub-menu>
              <el-menu-item v-else :index="children.menuUrl" :key="children.menuUrl">
                {{ children.menuName }}
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item :index="item.menuUrl" :key="item.menuUrl" v-show="item.menuName != '宣传教育情况'">
            <img style="margin-right: 5px" :src="'./src/assets/img/home/icon_' + item.menuUrl + '.png'" alt="" />
            <span>{{ item.menuName }}{{ item.menuUrl }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from '../common/bus';

import { userviewPageUser, waterreportrainfallgetRainfallByStcd } from '../../api/index';

function sort(arr) {
  for (var i = 0; i < arr.length - 1; i++) {
    for (var j = 0; j < arr.length - i - 1; j++) {
      if (arr[j].sort > arr[j + 1].sort) {
        var hand = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = hand;
      }
    }
  }
  return arr;
}

let menuData = [
  {
    menuUrl: 'jianceshuju',
    menuName: '监测数据',
    children: [
      {
        menuUrl: 'shishijiangyu',
        menuName: '实时降雨'
      },
      {
        menuUrl: 'shuiwei',
        menuName: '水位'
      }
      // {
      //   menuUrl: 'turangshuifen',
      //   menuName: '土壤水分'
      // }
    ]
  },
  {
    menuUrl: 'shebei',
    menuName: '设备台账',
    children: [
      {
        menuUrl: 'hetongguanli',
        menuName: '合同管理'
      },
      {
        menuUrl: 'procurementRecordMan',
        menuName: '采购记录'
      },
      {
        menuUrl: 'fundManagement',
        menuName: '资金支付明细'
      },
      // {
      //   menuUrl: 'caigoujilu',
      //   menuName: '采购记录'
      // },
      {
        menuUrl: 'shebeiqingdan',
        menuName: '设备清单'
      },

      {
        menuUrl: 'meteringAuthentication',
        menuName: '计量认证管理'
      }
    ]
  },

  // {
  //   menuUrl: 'renyuankaoqin',
  //   menuName: '人员考勤',
  //   children: [
  //     {
  //       menuUrl: 'qiandao',
  //       menuName: '签到'
  //     },
  //     {
  //       menuUrl: 'chuchai',
  //       menuName: '出差'
  //     },
  //     {
  //       menuUrl: 'qingjia',
  //       menuName: '请假'
  //     },
  //     {
  //       menuUrl: 'waichubanshi',
  //       menuName: '外出办事'
  //     }
  //   ]
  // },
  {
    menuUrl: 'chengguoguidang',
    menuName: '成果归档',
    children: [
      {
        menuUrl: 'techServRecordMan',
        menuName: '站点科技服务管理'
      },
      {
        menuUrl: 'visitRecordMan',
        menuName: '参观检查管理'
      },
      {
        menuUrl: 'archiveMan',
        menuName: '归档管理'
      }
    ]
  },
  {
    menuUrl: 'examSituationManagement',
    menuName: '人员考勤',
    children: [
      {
        menuUrl: 'examSituationManagement',
        menuName: '签到管理'
      },
      {
        menuUrl: 'tripManagement',
        menuName: '出差管理'
      },
      // {
      //   menuUrl: 'fundManagement',
      //   menuName: '资金支付明细'
      // },
      // {
      //   menuUrl: 'meteringAuthentication',
      //   menuName: '计量认证管理'
      // },
      {
        menuUrl: 'leaveManagement',
        menuName: '请假管理'
      },
      {
        menuUrl: 'outgoingManagement',
        menuName: '外出办公管理'
      }
    ]
  },
  {
    menuUrl: 'shebeixuncha',
    menuName: '设备巡查',
    children: [
      {
        menuUrl: 'xunchajilu',
        menuName: '巡查记录'
      },
      {
        menuUrl: 'xunchamingxi',
        menuName: '巡查项目'
      },
      {
        menuUrl: 'weixiujilu',
        menuName: '维修记录'
      }
    ]
  },
  {
    menuUrl: 'tongjifenxi',
    menuName: '统计分析',
    children: [
      {
        menuUrl: 'statisticalMan',
        menuName: '降雨量'
      },
      {
        menuUrl: 'jingliunisha',
        menuName: '土壤水分'
      }
    ]
  },
  {
    menuUrl: 'xitongguanli',
    menuName: '系统管理',
    children: [
      {
        menuUrl: 'xitongcaozuorizhi',
        menuName: '系统日志'
      },
      {
        menuUrl: 'APPmanagement',
        menuName: 'APP版本管理'
      }
    ]
  }
];

import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { defineComponent, onMounted, ref, computed } from 'vue';

export default defineComponent({
  setup() {
    let defaultopeneds = ref(['jiangyushuju', 'rijiangyu', '/jiangyushuju', '/rijiangyu']);
    // store.commit('changepage',{
    // 	currentPage:1,
    // 	pageSize:10
    // })

    const store = useStore();
    const $route = useRouter();
    let collapse = ref(false);
    let items = ref([]);

    const getPersonmenu = () => {
      items.value = menuData;
    };

    const getuserData = () => {
      userviewPageUser({
        currentPage: 1,
        pageSize: 100
      }).then((res) => {
        globalUser = res.object.dataList;
        sessionStorage.setItem('guser', JSON.stringify(res.object.dataList));
      });
    };

    const menuselect = (index, indexPath) => {
      if ($route.currentRoute.value.path != '/' + index) {
        store.commit('changepage', {
          currentPage: 1,
          pageSize: 10
        });
      }
    };

    let onRoutes = computed(() => {
      return $route.currentRoute.value.path.replace('/', '');
    });

    onMounted(() => {
      bus.on('collapse', (msg) => {
        collapse.value = msg;
        bus.emit('collapse-content', msg);
      });
      getPersonmenu();
      getuserData();
    });

    return {
      onRoutes,
      defaultopeneds,
      menuselect,
      items,
      collapse
    };
  }
});
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}
.sidebar > ul {
  height: 100%;
}
</style>
